import React, { useEffect, useState } from 'react'
import Head from 'next/head'
import Header from '@/components/header/header'
import { Affix, Tooltip, Modal, Input, message } from 'antd'
import {
  BugTwoTone
} from '@ant-design/icons'
import feedbackModel from './model/feedback'
import ContentList from '@/components/content/content'
import { storage } from '@/utils/utils'
import styles from '@/styles/Home.module.scss'
React.useLayoutEffect = useEffect
const { TextArea } = Input
function Home () {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [value, setValue] = useState('')
  useEffect(() => {
    // 写入主题缓存
    if (!storage.get('theme')) {
      storage.set('theme', 'night') 
    }
  }, [])
  const handleOk = () => {
    feedbackModel.addFeedback({
      data: {
        userId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
        content: value
      }
    }).then(data => {
      if (data.success) {
        message.success(data.message)
        setIsModalVisible(false)
      }
    })
  }
  const handleCancel = () => {
    setIsModalVisible(false)
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>Le-Yi</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header type="home" />
      <ContentList />
      <Affix offsetBottom={50} style={{position: 'absolute', right: 30}}>
        <Tooltip title="意见反馈">
          <BugTwoTone style={{fontSize: 30, cursor: 'pointer'}} onClick={() => setIsModalVisible(true)} />
        </Tooltip>
      </Affix>
      <Modal className="bug" title="我要反馈" okText="提交" visible={isModalVisible} onOk={handleOk} centered onCancel={handleCancel} destroyOnClose={true}>
        <TextArea
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="请输入您的问题😀"
          autoSize={{ minRows: 5, maxRows: 8 }}
        />
      </Modal>
    </div>
  )
}

export default  Home